<template>
	<header>
		<div class="l-content">
			<el-button type="primary" icon="el-icon-menu" size="mini"
			@click="collapseMenu"
			></el-button>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="current.path" v-if="current">
					{{current.label}}
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="r-content">
			<el-dropdown trigger="click">
				<span class="el-dropdown-link">
					<img :src="userImg" class="userImg">
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>我的</el-dropdown-item>
					<el-dropdown-item @click.native="logOut">退出</el-dropdown-item>

				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</header>

</template>

<script>
	//引入映射方法
	import {
		mapState
	} from 'vuex'
	import { removeToken } from "../utils/auth";
	export default {
		data() {
			return {
				userImg: require('../assets/images/user.png')
			}
		},
		methods:{
			//折叠左部菜单栏
			collapseMenu(){
				this.$store.commit('collapseMenu')
			},
			logOut(){
				
				removeToken()		
				this.$router.push({ name: 'login' })
			}
		},
		computed: {
			...mapState({
				current: state => state.tab.currentMenu
			})
		}

	}
</script>

<style lang="scss" scoped>
	header {
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: space-between;

	}

	.r-content .userImg {
		width: 54px;
		height: 54px;
		border-radius: 50px;
	}

	.l-content {

		display: flex;
		align-items: center;

		.el-button {
			margin-right: 20px;
		}
	}
</style>
<style lang="scss">
	.el-breadcrumb__inner a,
	.el-breadcrumb__inner.is-link {
		color: white;
	}

	.el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
		color: #FB7299;
	}
</style>
